<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center{
    height: 200px;
    position: relative;
    border: 3px solid green;
}
.center p{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
</style>
</head>
<body>
    <h2>居中</h2>
    <p>以下实例中，我们使用了position和transform属性来设置水平和垂直居中：</p>
    <div class="center">
        <p>我是水平和垂直都居中的。</p>
    </div>
    </body>
</html>